<!--
 * @Author: zcy
 * @Date: 2025-02-17 10:20:28
 * @LastEditTime: 2025-02-17 17:40:12
 * @LastEditors: zcy
 * @FilePath: \my-vue-app\src\components\HelloWorld.vue
 * @Description: 
-->
<script setup>
import { reactive, ref } from "vue";
import database from "../database/pokemon_data.json";
import { ElMessage } from "element-plus";
// import { el } from "element-plus/es/locales.mjs";
defineProps({
  msg: String,
});
const resultShow = ref(false);
const count = ref(0);
let sizeForm = reactive({
  name: "",
});
const select = ref([{}, {}, {}, {}, {}]);
const result = ref({});
const indexOut = ref(1);
const questions = ref([
  {
    text: "Q1. 遇到突发危机的第一反应？",
    options: [
      { text: "A) 查看应急预案", value: "守护者", val: 0 },
      { text: "B) 呼叫支援", value: "共生者", val: 1 },
      { text: "C) 直接正面突破", value: "挑战者", val: 2 },
      { text: "D) 用非常规手段破局", value: "破坏者", val: 3 },
    ],
  },
  {
    text: "Q2. 团队合作中你常扮演着怎样的角色？",
    options: [
      { text: "A) 调和矛盾的气氛组", value: "情感共鸣", val: 0 },
      { text: "B) 精准预测风险的智囊", value: "穿透真相", val: 1 },
      { text: "C) 带领众人的领队", value: "卓越有担当", val: 2 },
      { text: "D) 提出疯狂创意的鬼才", value: "创意构建", val: 3 },
    ],
  },
  {
    text: "Q3. 做决策时你更依赖?",
    options: [
      { text: "A) 数据图表与概率", value: "理性渐进型", val: 0 },
      { text: "B) 亲友的经验建议", value: "群体共进型", val: 1 },
      { text: "C) 直觉与灵感闪现", value: "动态适应型", val: 2 },
      { text: "D) 道德准则与价值判断", value: "自我稳固型", val: 3 },
    ],
  },
  {
    text: "Q4. 以下视觉元素最吸引你?",
    options: [
      { text: "A) 精密机械的结构美", value: "洞悉者", val: 0 },
      { text: "B) 自然生态的和谐感", value: "自然守卫者", val: 1 },
      { text: "C) 抽象艺术的情绪张力", value: "情绪共振体", val: 2 },
      { text: "D) 复古文化的厚重感", value: "秩序守护者", val: 3 },
    ],
  },
  {
    text: "Q5. 你理想的周末活动是什么？",
    options: [
      { text: "A) 参加行业交流会学习", value: "求知进取", val: 0 },
      { text: "B) 与好友露营看星空", value: "仰望星空", val: 1 },
      { text: "C) 独自研究新技能", value: "凝聚专注", val: 2 },
      { text: "D) 极限运动释放压力", value: "能量涌动", val: 3 },
    ],
  },
  // 其他题目结构类似，此处省略以节省篇幅
]);
function findPoke(data) {
  return (
    data[0].val * 256 +
    data[1].val * 64 +
    data[2].val * 16 +
    data[3].val * 4 +
    data[4].val
  );
}
function checkNoEmptyObjects(arr) {
  return arr.every(item =>
      // 排除非对象类型和空对象
      typeof item !== 'object' ||
      item === null ||
      Object.keys(item).length !== 0
  )
}
function check() {
  if (!select.value.every(item => Object.keys(item).length > 0)) {
    open3();
    return;
  } else {
    let index = findPoke(select.value) ;
    console.log(index);
    result.value = database[index];
    indexOut.value = index + 1;
  }
  resultShow.value = true;
}
function getImageUrl(name) {
  return new URL(`/src/assets/pokemon_images/${name}.png`, import.meta.url)
    .href;
}
const open3 = () => {
  ElMessage({
    message: "请选完题目哦！",
    type: "warning",
  });
};
function formatArray(arr) {
  if (arr.length === 1) {
    return arr[0]; // 如果长度是1, 直接输出字符串
  } else if (arr.length > 1) {
    return arr.join(" + "); // 如果大于1, 用+号拼接字符串
  } else {
    return ""; // 空数组返回空字符串
  }
}
function back() {
  resultShow.value = false;
  select.value = [{}, {}, {}, {}, {}];
  result.value = {};
  console.log(select, result);
}
</script>

<template>
  <div class="title">
    <h1>选择你的宝可梦吧！</h1>
  </div>
  <div class="card" v-if="!resultShow">
    <el-card
      style="max-width: 960px; margin-top: 20px"
      v-for="(item, index) in questions"
      :key="index"
    >
      <template #header>
        <div class="card-header">
          <span>{{ item.text }}</span>
        </div>
      </template>
      <el-radio-group v-model="select[index]">
        <el-radio
          v-for="(jtem, jndex) in item.options"
          :key="jndex + jtem.val + ''"
          :value="item.options[jndex]"
          >{{ item.options[jndex].text }}</el-radio
        >
      </el-radio-group>
    </el-card>
    <div class="foot">
      <el-button type="primary" class="clickBtn" size="large" @click="check"
        >Pokemon GO!</el-button
      >
    </div>
  </div>
  <div class="card" v-if="resultShow">
    <el-card style="max-width: 960px; margin-top: 20px">
      <template #header>
        <div class="card-header">
          <h2>{{ result.name }}</h2>
        </div>
      </template>
      <img
        style="width: 96px; height: 96px"
        :src="getImageUrl(indexOut)"
        :fit="fit"
      />
      <el-row :gutter="20">
        <el-col :span="4" style="text-align: right"> 属性组合：</el-col
        ><el-col :span="20" style="text-align: left"
          >{{ formatArray(result.types) }}属性的{{ select[0].value }}</el-col
        >
        <el-col :span="4" style="text-align: right"> 特征简述：</el-col
        ><el-col :span="20" style="text-align: left">{{
          result.recommend_text
        }}</el-col>
        <el-col :span="4" style="text-align: right"> 适配理由：</el-col
        ><el-col :span="20" style="text-align: left">{{
          select[1].value +
          "+" +
          select[4].value +
          "  " +
          select[2].value +
          select[3].value
        }}</el-col>
      </el-row>
      <template #footer>
        <el-button type="primary" class="clickBtn" size="large" @click="back"
          >再来一次!</el-button
        ></template
      >
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.read-the-docs {
  color: #888;
}
.card-header {
  text-align: left;
}
.foot {
  margin-top: 20px;
  text-align: center;
}
</style>
